<template>
  <el-dialog :title="title" :visible.sync="dialogFormVisible" :close-on-click-modal='false' fullscreen center append-to-body>
    <el-button class="miui-dialog-close-btn" @click="dialogFormVisible = false">关闭页面</el-button>
    <el-form ref="dataForm" :model="dataForm" label-width="80px" :rules="rules" :disabled="display">
      <el-row>
        <el-col :span="8">
          <el-form-item label="省" prop="provinceCode">
            <el-select v-model="dataForm.provinceCode" placeholder="请选择" @change="changeCity(dataForm.provinceCode)">
              <el-option v-for="item in provinces" :key="item.id" :label="item.regionName"
                :value="item.id">
                <span style="float: left">{{ item.regionName }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.id }}</span>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="市" prop="cityCode">
            <el-select v-model="dataForm.cityCode" placeholder="请选择" @change="changeArea(dataForm.cityCode)">
              <el-option v-for="item in citys" :key="item.id" :label="item.regionName"
                :value="item.id">
                <span style="float: left">{{ item.regionName }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.id }}</span>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="区" prop="areaCode">
            <el-select v-model="dataForm.areaCode" placeholder="请选择">
              <el-option v-for="item in areas" :key="item.id" :label="item.regionName"
                :value="item.id">
                <span style="float: left">{{ item.regionName }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.id }}</span>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="详细地址" prop="address">
            <el-input v-model="dataForm.address" placeholder="请输入详细地址"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="区域类型" prop="location">
            <el-radio-group v-model="dataForm.location" size="small">
              <el-radio-button :label="0">城区</el-radio-button>
              <el-radio-button :label="1">乡镇</el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="是否合作" prop="location">
            <el-radio-group v-model="dataForm.isPartner" size="small">
              <el-radio-button :label="0">否</el-radio-button>
              <el-radio-button :label="1">是</el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-col>

      </el-row>
      <el-row>
        <el-col :span="8">
            <el-form-item label="学校名称" prop="schoolName">
              <el-input v-model="dataForm.schoolName"></el-input>
            </el-form-item>
        </el-col>
        <el-col :span="8">
            <el-form-item label="学校编码" prop="schoolCode">
              <el-input v-model="dataForm.schoolCode"></el-input>
            </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="拼音编码" prop="pinyinCode">
            <el-input v-model="dataForm.pinyinCode"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="负责人" prop="leader">
            <el-input v-model="dataForm.leader"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="联系人" prop="contactName">
            <el-input v-model="dataForm.contactName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="联系方式" prop="contact">
            <el-input v-model="dataForm.contact"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="学校类型" prop="schoolType">
            <el-select v-model="dataForm.schoolType">
              <el-option v-for="item in typeOptions" :label="item.label" :value="item.value" :key="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="学校状态" prop="status">
            <el-radio-group v-model="dataForm.status" size="small">
              <el-radio-button :label="1">启用</el-radio-button>
              <el-radio-button :label="-1">停用</el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer" v-if="!display">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="onSubmit()">提 交</el-button>
    </div>

  </el-dialog>
</template>

<script>
  import { getListByParentId } from '@/api/admin/region'
  import { remote } from '@/api/admin/dict'
  import { getSchoolObj, addObj, putObj,  } from '@/api/pvm/school'

  export default {
    name: 'add',
    data() {
      return {
        title: '',
        display: false,
        dialogFormVisible: false,
        provinces: [],
        citys: [],
        areas: [],
        dataForm: {
          provinceCode: '',
          cityCode: '',
          areaCode: '',
          address: '',
          schoolName: '',
          schoolCode: '',
          pinyinCode: '',
          schoolType: '',
          location: '',
          status: '',
          leader: '',
          contactName: '',
          contact: ''
        },
        rules: {
          schoolName: [{required: true,message: '请输入学校名称',trigger: 'blur'}],
          provinceCode: [{required: true,message: '请选择一个省级地址',trigger: 'change'}],
          cityCode: [{required: true,message: '请选择一个市级地址',trigger: 'change'}],
          areaCode: [{required: true,message: '请选择一个区级地址',trigger: 'change'}],
          address: [{required: true,message: '请输入详细地址',trigger: 'blur'}],
          schoolCode: [{required: true,message: '请输入学校编码',trigger: 'blur'}],
          //leader: [{required: true,message: '请输入学校负责人',trigger: 'blur'}],
          contactName: [{required: true,message: '请输入学校联系人',trigger: 'blur'}],
          contact: [{required: true,message: '请输入学校联系方式',trigger: 'blur'}],
          schoolType: [{required: true,message: '请选择学校类型',trigger: 'blur'}],
          status: [{required: true,message: '请选择学校状态',trigger: 'blur'}],
          location: [{required: true,message: '请选择区域类型',trigger: 'blur'}],
        },
        typeOptions: []
      }
    },

    created: function() {
      this.getCityData()
    },
    methods: {
      /*
       * params {id} 政府ID，不存在时为新增政府
       * params {type} 表单类型 "add":新增 "edit":编辑 "check":查看
       */
      init(id, type) {
        this.dialogFormVisible = true;
        if(type == 'check'){
          this.display = true
        }else{
          this.display = false
        }
        //  根据type确定弹窗标题
        switch(type){
          case 'add': {
            this.title = '学校新增'
            break;
          };
          case 'edit': {
            this.title = '学校编辑'
            break;
          };
          case 'check': {
            this.title = '学校详情'
            break;
          };
        }
        //  初始化表单信息
        // for(let key in this.dataForm){
        //   this.dataForm[key] = ''
        // }
        this.$set(this.dataForm,'status',1)
        this.$set(this.dataForm,'isPartner',0)
        this.$set(this.dataForm,'location',0)
        this.$set(this.dataForm,'id',id)
        //
        this.getCityData()
        // 获取学校类型列表
        remote('school_type').then(response => {
          let responseData = response.data.data
          let list = []
          responseData.forEach(item => {
            list.push({label: item.label, value: item.value*1})
          })
          this.typeOptions = [...list]
        })

        //  获取政府信息
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
          if(this.dataForm.id){
            getSchoolObj(this.dataForm.id).then(res => {
              if(res.data.code == '0'){
                this.dataForm = res.data.data
                delete this.dataForm.grades
                getListByParentId(res.data.data.provinceCode).then(response => {
                  if(response.data.code == '0'){
                    this.citys = response.data.data
                  }else{
                    this.$message.error(response.data.msg)
                  }
                })
                getListByParentId(res.data.data.cityCode).then(response => {
                  if(response.data.code == '0'){
                    this.areas = response.data.data
                  }else{
                    this.$message.error(response.data.msg)
                  }
                })
                this.dataForm.provinceCode = this.dataForm.provinceCode*1
                this.dataForm.cityCode = this.dataForm.cityCode*1
                this.dataForm.areaCode = this.dataForm.areaCode*1
              }else{
                this.$message.error(res.data.msg)
              }
            })
          }
        })
      },
      //自动生成省级地址列表
      getCityData() {
        var parentId = '86';
        getListByParentId(parentId).then(response => {
          if(response.data.code == '0'){
            this.provinces = response.data.data
          }else{
            this.$message.error(response.data.msg)
          }
        }).catch(() => {
          alert("省级地址出错了，请联系管理员a ")
        });
      },

      //设置市级地区列表
      changeCity: function(parentId) {
        this.dataForm.cityCode = "";
        this.dataForm.areaCode = "";
        if (this.dataForm.provinceCode != "") {
          getListByParentId(parentId).then(response => {
            if(response.data.code == '0'){
              this.citys = response.data.data
            }else{
              this.$message.error(response.data.msg)
            }
          }).catch(() => {
            alert("市级地址出错了，请联系管理员")
          });
        }
      },
      //设置区级地区列表
      changeArea: function(parentId) {
        this.dataForm.areaCode = "";
        if (this.dataForm.cityCode != "") {
          getListByParentId(parentId).then(response => {
            if(response.data.code == '0'){
              this.areas = response.data.data
            }else{
              this.$message.error(response.data.msg)
            }
          }).catch(() => {
            alert("区级地址出错了,请联系管理员")
          });
        }
      },
      //提交按钮
      onSubmit: function() {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            let formData = JSON.stringify(this.dataForm);
            if(this.dataForm.id){
              putObj(this.dataForm).then(response => {
                if(response.data.code == '0'){
                  this.dialogFormVisible = false
                  this.$message.success('编辑成功')
                  this.$emit('refreshDataList')
                }else{
                  this.$message.error(response.data.msg)
                }
                
              }).catch(() => {
                alert('编辑失败，请联系管理员')
              })
            }else{
              addObj(this.dataForm).then(response => {
                if(response.data.code == '0'){
                  this.dialogFormVisible = false
                  this.$message.success('添加成功')
                  this.$emit('refreshDataList')
                }else{
                  this.$message.error(response.data.msg)
                }
              }).catch(() => {
                alert("添加失败，请联系管理员")
              });
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
    }
  }
</script>
